import React, { Component } from 'react'
// 生命周期，只在类组件中有这个概念
export default class test extends Component {
  // 挂载期的第一个生命周期函数
  // 它的作用是初化当前组件的state,同时使用super继承父类的属性
  // super用于继承父类的属性的方法，如果当前类里没有constructor，es6会在当前类里隐式地加载一个constructor并执行super方法
  constructor(props: any) {
    super(props)
  }

  // 挂载期第二个生命周期是render
  // 它会将我们在constructor和props中定义（继承到的）属性以jsx的方式渲染到虚拟DOM

  // 挂载期第三个生命周期是componentDidMount
  // 它是的在虚拟DOM生成完整且渲染到真实DOM以后才执行的一个函数，我们可以这个生命周期中去使用ref捕获DOM节点，或者创建计时器等；
  // 还有一些比如更新数据，从接口获取数据等等操作都在这里执行
  // 它在所有组件里都会存在且一定会执行，但它只执行一次，一旦组件渲染完成调用后就再也不执行了
  // 所以我们还可以在这里去监听一些页面的事件
  componentDidMount() {
    // 监听页面窗口大小变化
    window.addEventListener('resize', () => {})
  }

  // 更新期 第一个生命周期函数是shouldComponentUpdate
  // 它接受两个参数，一个是最新的props,一个是最新的state
  // 我们可以在这里去对它们作些比较，如果确认需要渲染，就返回true，否则返回false
  // 所有更新期的生命周期函数会在每一次检测到props或state变化时被执行
  // 所以，它们在某些永不更新的组件时是不存在的，不会被执行
  shouldComponentUpdate(nextProps: any, nextState: any) {
    return true
  }

  // 与shouldComponentUpdate差不多的，react还提供了一个叫pureComponet的基类，
  // pure意思是纯的，也就是说写入到这个组件的props是经过过滤的，一些跟当前组件无关的状态变化是不会往里传的
  // 它其实就是在里面对shouldComponentUpdate做了一个封装，所以，我们无法在pureComponent里调用shouldComponentUpdate这个函数

  // 更新期第二个生命周期与挂载期共用的render
  // 它会将我们在constructor和props中定义（继承到的）属性以jsx的方式渲染到虚拟DOM

  // 更新期的第三个生命周期，它与componentDidMount基本一致，我们可以在这里去更新DOM节点
  // 也可以根据更新的数据重新请求ajax获取数据
  // 但要注意的是，不能在这里监听页面事件，也不能定义计时器，除非你知道这样做会出现什么问题并知道怎样避免
  // 这里面如果改变state里的属性的值，会导致当前组件进入死循环，无法退出
  componentDidUpdate() {}

  componentWillUnmount() {}

  // 被复用的生命周期render，它同时存在于挂载期和更新期
  render() {
    return (
      <div>
        
      </div>
    )
  }
}
